<template>
    <div class="swpbox">
        <swiper :slides-per-view="1" :space-between="50" navigation @swiper="onSwiper" @slideChange="onSlideChange" :modules="[Navigation]">
            <swiper-slide>
                <ul class="tqlist tqlist2">
                    <li v-for="(dt,index) in lists" :key="index">
                        <div class="main">
                            <p>{{dateToWeek(dt.fxDate)}}</p>
                            <p>{{dt.fxDate}}</p>
                            <div class="fx">
                                <i :class="`qi-${dt.iconDay}`"></i>
                                <!-- <el-icon :size="18"><Pouring /></el-icon> -->
                            </div>
                            <p>{{dt.textDay}}</p>
                            <p>{{dt.tempMin}}°C～{{dt.tempMax}}°C</p>
                            <p>{{dt.humidity}}%</p>
                            <p>{{dt.windDirDay}} {{dt.windScaleDay}}级</p>
                        </div>
                        <!-- <div class="flagbox">
                            <span>大风</span>
                            <span>高温</span>
                        </div> -->
                    </li>
                </ul>
            </swiper-slide>
            <!-- <swiper-slide>
                <ul class="tqlist tqlist2">
                    <li v-for="dt in 7">
                        <div class="main">
                            <p>星期一1</p>
                            <p>8月22号</p>
                            <div class="fx">
                                <el-icon :size="18"><Pouring /></el-icon>
                            </div>
                            <p>阴转多云</p>
                            <p>26°C～32°C</p>
                            <p>45%</p>
                            <p>南风2级</p>
                        </div>
                        <div class="flagbox">
                            <span>大风</span>
                            <span>高温</span>
                        </div>
                    </li>
                </ul>
            </swiper-slide>
            <swiper-slide>
                <ul class="tqlist tqlist2">
                    <li v-for="dt in 7">
                        <div class="main">
                            <p>星期一1</p>
                            <p>8月22号</p>
                            <div class="fx">
                                <el-icon :size="18"><Pouring /></el-icon>
                            </div>
                            <p>阴转多云</p>
                            <p>26°C～32°C</p>
                            <p>45%</p>
                            <p>南风2级</p>
                        </div>
                        <div class="flagbox">
                            <span>大风</span>
                            <span>高温</span>
                        </div>
                    </li>
                </ul>
            </swiper-slide> -->
        </swiper>
    </div>
    
</template>
<script setup>
import {ref,onMounted,watch} from "vue"
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Navigation} from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/navigation';
import {getDailyWeather} from '@/api/plant'
import {dateToWeek} from '@/utils/format'
import { useFramStore } from '@/pinia/modules/farm'
const framStore = useFramStore()

const lists = ref('')
let swiperObj = ''

onMounted(()=>{
    get_daily_weather()
})

watch(()=>framStore.weacherFarmItem,(n,o)=>{
    if(swiperObj) {
        swiperObj.slideTo(0)//切换到第一个slide，
    }
    get_daily_weather()
})

const get_daily_weather = async ()=>{
    const res = await getDailyWeather('D7',`${framStore.weacherFarmItem.locationLongitude},${framStore.weacherFarmItem.locationLatitude}`)
    lists.value = res.daily
}
const onSwiper = (swiper) => {
    swiperObj = swiper
};
const onSlideChange = () => {
    console.log('slide change');
};
</script>
<style lang="scss" >
    .swpbox{
        box-sizing: border-box;
        overflow: hidden;
        width: 100%;
        background-color: #f8f9f9;
        border: 1px solid #eef0ef;
        .tqlist{
            box-sizing: border-box;
            display: flex;
            width: 100%;
            padding: 6px 50px;
            overflow: hidden;
            &.tqlist2{
                li{
                    display: flex;
                    .main{
                        flex: 1;
                        text-align: center;
                    }
                    
                }
            }
            li{
                box-sizing: border-box;
               // height: 200px;
                flex: 1;
                line-height: 26px;
                padding: 10px 0 0 0;
                
                &+li{
                   .main{
                        border-left: 1px dashed #999; 
                   } 
                }
                .main{
                    text-align: center;  
                    position: relative;
                    z-index: 10;
                    .fx{
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        i{
                            line-height: normal;
                            font-size: 18px;
                        }
                    }
                }
                .time{
                    text-align: center;
                }
                .flagbox{
                    display: flex;
                    box-sizing: border-box;
                    //width: 50px;
                    flex-flow: column;
                    line-height: normal;
                    padding: 0 8px 0 0;
                    span{
                        height: 20px;
                        line-height: 20px;
                        background-color: #f93d3d;
                        color: #fff;
                        padding: 0 3px;
                        &+span{
                            margin-top: 5px;
                        }
                    }
                }
            }
        }
        .swiper-button-prev:after,.swiper-button-next:after{
            font-size: 20px;
            color: #333;
        }
    }
</style>